import React, { Component } from 'react';
import { Row, Col } from 'antd';
import { connect } from 'dva';
import CommonEchartComp from '../components/CommonEchartComp';
// import LeaderMap from '../components/mapContainer'
import styles from './style/index.less';
import Tab from './components/Tab';
import Detail from './components/Detail';
@connect(({ cockpit }) => ({
  waterWorksMonthly: cockpit.waterWorksMonthly, // 各水厂全年生产水量统计图
  waterTypesMonthly: cockpit.waterTypesMonthly, // 各类用水量全年统计图
  productMarketMonthly: cockpit.productMarketMonthly, // 水司全年产销差统计图
  leakageRateMonthly: cockpit.leakageRateMonthly, // 水司全年漏损率统计图
  reportedUsersMonthly: cockpit.reportedUsersMonthly, // 水司全年报装用户数统计
  waterCharge: cockpit.waterCharge, // 水司全年应收、实收水费统计图
  annualData: cockpit.annualData, // 指标类数据
  projectData: cockpit.projectData, // 工程类数据
}))
class LeaderCockpit extends Component {

  month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

  // echarts图配置
  echartsConfig = {
    productMarketMonthly: { color: '#5B9BD5', formatter: '%', imgFormatter: '百分比' },
    leakageRateMonthly: { color: '#ED7D31', formatter: '%', imgFormatter: '百分比' },
    reportedUsersMonthly: { color: '#93C7B0', formatter: '户', imgFormatter: '户' },
    waterTypesMonthly: { formatter: '万吨', imgFormatter: '万/吨' },
    waterCharge: { formatter: '元', imgFormatter: '元' },
  };

  echartsOption = {
    containerStyle: { width: '100%', height: 270 },
    load: {},
  }

  // 左侧功能
  featureLeft = [
    { key: 'waterWorksMonthly', value: '各水厂全年按月生产水量' },
    { key: 'waterTypesMonthly', value: '各类用水全年统计' },
    { key: 'productMarketMonthly', value: '水司全年按月产销差率' }
  ]

  // 右侧功能
  featureRight = [
    { key: 'leakageRateMonthly', value: '水司全年按月统计漏损率' },
    { key: 'reportedUsersMonthly', value: '水司全年按月统计报装数量' },
    { key: 'waterCharge', value: '水司全年按月统计应收水费、实收水费' }
  ]


  componentDidMount() {
    this.initAllData();
  }

  componentWillUnmount() {
    // 将namespace中的数据清空
    this.props.dispatch({
      type: 'cockpit/resetData',
    })
  }

  // 获取页面数据
  initAllData = () => {
    this.props.dispatch({
      type: 'cockpit/fetchData',
      payload: {}
    });
  }

  // 生成echarts
  getEcharts = (title) => {
    // 获取当前图形参数
    const { type = '', engineerName = [], data = [] } = this.props[title];
    // console.log(type, engineerName, data);
    if (title === 'waterWorksMonthly') {
      let series = [];  // 数据
      let legend = []; // 图例
      let xAxis = []; // 横坐标
      this.month.forEach(x => { xAxis.push(x) });
      // 生成数据源
      data.forEach(x => {
        legend.push(x.name);
        series.push({
          name: x.name,
          data: x.data,
          type: 'bar',
        })
      });
      let echartsOption = {
        option: {
          // dataset: { source },
          series,
          legend: { legend, padding: [15, 0, 0, 5] },
          tooltip: { trigger: 'item' },
          xAxis: {
            data: xAxis,
            type: 'category',
            axisLabel: {
              interval: 0,// 代表显示所有x轴标签显示
            }
          },
          yAxis: {
            type: 'value',
            name: "万/吨", // 坐标名字
            nameLocation: "end",// 坐标位置，支持start,end，middle
            nameTextStyle: {// 字体样式
              fontSize: 14,// 字体大小
              padding: [25, 0, 0, -10] // 距离坐标位置的距离
            }
          },
          grid: { // 可以设置距离容器的位置
            top: "15%",
            left: '11%',
          },
        }
      }
      echartsOption = { ...this.echartsOption, ...echartsOption };
      return <CommonEchartComp {...echartsOption} />
    } else if (title === 'waterTypesMonthly' || title === 'waterCharge') {
      let formatter = '{b} ';
      engineerName.forEach((item, index) => {
        formatter += `<br/>{a${index}} : {c${index}}${this.echartsConfig[title]['formatter']}`;
      });
      const series = engineerName.map((item, index) => {
        const value = data.filter(val => { return val.name === item });
        return { name: item, type: 'line', stack: '总量', data: value[0].data };
      });
      let echartsOption = {
        option: {
          legend: { padding: [15, 0, 0, 10] },
          tooltip: { trigger: 'axis', formatter },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.month,
            axisLabel: {
              interval: 0,// 代表显示所有x轴标签显示
            }
          },
          yAxis: {
            type: 'value',
            name: this.echartsConfig[title].imgFormatter, // 坐标名字
            nameLocation: "end",// 坐标位置，支持start,end，middle
            nameTextStyle: {// 字体样式
              fontSize: 14,// 字体大小
              padding: [25, 0, 0, -10] // 距离坐标位置的距离
            }
          },
          grid: { // 可以设置距离容器的位置
            top: "15%",
            left: '11%',
          },
          series
        }
      }
      echartsOption = { ...this.echartsOption, ...echartsOption };
      return <CommonEchartComp {...echartsOption} />
    } else if (title === 'productMarketMonthly' || title === 'leakageRateMonthly' || title === 'reportedUsersMonthly') {
      const series = type !== '' ? [{
        data,
        type,
        itemStyle: { normal: { color: this.echartsConfig[title]['color'] } }
      }] : [];
      let echartsOption = {
        option: {
          series,
          tooltip: {
            trigger: 'axis', formatter: `{b0}: {c0}${this.echartsConfig[title]['formatter']}`
          },
          xAxis: {
            type: 'category',
            data: this.month,
            axisLabel: {
              interval: 0,// 代表显示所有x轴标签显示
            }
          },
          yAxis: {
            type: 'value',
            name: this.echartsConfig[title].imgFormatter, // 坐标名字
            nameLocation: "end",// 坐标位置，支持start,end，middle
            nameTextStyle: {// 字体样式
              fontSize: 14,// 字体大小
              padding: [25, 0, 0, -10] // 距离坐标位置的距离
            }
          },
          grid: { // 可以设置距离容器的位置
            top: "15%",
            left: '11%',
          },
        }
      }
      echartsOption = { ...this.echartsOption, ...echartsOption };
      return <CommonEchartComp {...echartsOption} />
    }
  }

  render() {
    return (
      <div className={styles.container}>
        <Row>
          <Col span={7}>
            {this.featureLeft.map(item => {
              return (
                <div className={styles.cardBox} key={item.key}>
                  <div className={styles.cardHeader}><p className={styles.cardTitle}>{item['value']}</p></div>
                  <div className={styles.cardEcharts}>{this.getEcharts(item.key, 'waterWorksMonthly')}</div>
                </div>
              )
            })}
          </Col>
          <Col span={10}>
            <Tab annualData={this.props.annualData} />
            <div className={styles.cardMainMap}>
              <div className={styles.mapArea}>
                <div className={styles.mapContainer}>

                </div>
              </div>
              <Detail projectData={this.props.projectData} />
            </div>
          </Col>
          <Col span={7}>
            {this.featureRight.map(item => {
              return (
                <div className={styles.cardBox} key={item.key}>
                  <div className={styles.cardHeader}><p className={styles.cardTitle}>{item['value']}</p></div>
                  <div className={styles.cardEcharts}>{this.getEcharts(item.key, 'waterWorksMonthly')}</div>
                </div>
              )
            })}
          </Col>
        </Row>
      </div>
    );
  }
}

export default LeaderCockpit;
